<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            vue3 中为对象新增加属性 因为使用了proxy 所以依然存在响应式操作 
                ==> vue3 移除了 vue2的vm.$set方法
        -->
        <p>{{ user }}</p>
        <p>{{ user.sex }}</p>
        <input type="button" value="changeUserName" @click="changeUserName()">
        <input type="button" value="addUserAge" @click="addUserAge()">
        <input type="button" value="addUserSex" @click="addUserSex()">
        <hr>

        <!-- 
            vue3 使用Proxy 完成拦截操作，对数组而言 数组下标，长度的操作会具有响应功能
                 同时 数组保留了 变更方法规则，为vue3对数组的相关操作提供扩展处理
         -->
        <p>{{ arr }}</p>
        <input type="button" value="changeArr" @click="changeArr(0)">
        <input type="button" value="setArrLength" @click="setArrLength(2)">
        <input type="button" value="addArrItem" @click="addArrItem(22222)">
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    user:{
                        name:"aaa"
                    },
                    arr:[1,2,3,4,5]
                }
            },
            methods:{
                changeUserName(){
                    this.user.name = 111;
                },
                addUserAge(){
                    this.user.age = 23;
                    console.log(this)
                },
                addUserSex(){
                    this.user.sex = "男";
                    console.log(this)
                },
                changeArr(i){
                    this.arr[i] = 11111;
                    console.log(this)
                },
                setArrLength(len){
                    this.arr.length = len;
                },
                addArrItem(nv){
                    this.arr.push(nv)
                }
            }
        }).mount("#app")
    </script>
</body>
</html>